.index-top {
  height: 48.13rem;
  flex-shrink: 0;
  background: url("static/index/banner_dz.png.png") lightgray -19rem -6.19rem /
    131.667% 112.857% no-repeat;
  padding-top: 1px;

  .top1 {
    // display: flex;
    // width: 34.26rem;
    // height: 1.5rem;

    color: #333333;
    font-family: "Microsoft YaHei";
    font-size: 3.13rem;
    font-style: normal;
    font-weight: 700;
    margin-top: 10rem;
  }

  .top2 {
    width: 27.02rem;

    color: #333333;
    font-family: "Microsoft YaHei";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;

    margin-top: 3.44rem;
  }

  .top3 {
    width: 3.69rem;
    height: 0.31rem;
    flex-shrink: 0;
    background: linear-gradient(90deg, #37cafa 0%, #2d6ef3 100%), #056fe7;

    margin-top: 3.44rem;
  }

  .top5 {
    display: flex;
    width: 11.25rem;
    height: 3.13rem;
    padding: 0 3.1rem 0 3.13rem;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 0.19rem;
    background: linear-gradient(90deg, #37cafa 0%, #2d6ef3 100%);
    color: #fff;
    margin-top: 5.19rem;
    cursor: pointer;
  }

  .top4 {
    display: flex;
    width: 41.96rem;

    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: #555555;
    font-family: "Microsoft YaHei";
    font-size: 1.13rem;
    font-style: normal;
    font-weight: 400;

    margin-top: 3.25rem;
  }
}

.index-second {
  width: 100%;
  height: 7.13rem;
  flex-shrink: 0;
  background: #2e72f3;
  padding: 1.88rem 0;

  .item1 {
    // width: 19.38rem;
    height: 1.5rem;
    padding-left: 2.06rem;
    border-left: 1px solid #96b8f9;
    color: #ffffff;
    font-family: "Microsoft YaHei";
    font-size: 1.81rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem;
    border-left: 1px solid #fff;

    span {
      font-size: 0.88rem;
    }
  }

  .item2 {
    // width: 19.38rem;
    height: 1.5rem;
    padding-left: 2.06rem;
    color: #cddbf8;
    font-family: "Microsoft YaHei";
    font-size: 1.13rem;
    font-style: normal;
    font-weight: 400;
    border-left: 1px solid #6dadf4;
    line-height: 1.5rem;
    padding-top: 0.31rem;
  }
}

.server-content {
  width: 100%;
  height: 46.75rem;
  background: url("static/index/Background.png");

  .index-title {
    color: #292b33;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 1.88rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    padding-top: 6.31rem;
  }

  .index-desc {
    display: flex;
    width: 100%;
    height: 1.3rem;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: #474b59;
    text-align: center;
    font-family: "Arial";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3rem;
    margin-top: 1.31rem;
  }

  .card-list {
    width: 75rem;
    justify-content: center;
    margin: 0 auto;
  }

  .index-card {
    width: 16.87rem;
    height: 22.5rem;
    flex-shrink: 0;
    border: 0.06rem solid #fff;
    background: linear-gradient(0deg, #fff 0%, #ecf5ff 100%);
    box-shadow: 0.06rem 0.88rem 2.88rem 0 rgba(0, 36, 96, 0.17);
    padding: 1.94rem;
    margin: 6.14rem 1.25rem 0;

    .card-logo {
      width: 3.13rem;
      height: 3.13rem;
      flex-shrink: 0;
      // background: url("static/index/ico01.png.png") lightgray 0 0 / 100% 100%
      //   no-repeat;
    }

    .card-title {
      flex-shrink: 0;
      color: rgb(26, 26, 26);
      font-family: "Arial";
      font-size: 1.38rem;
      font-style: normal;
      margin-top: 2.13rem;
    }

    .card-desc {
      flex-shrink: 0;
      color: rgb(107, 111, 116);
      font-family: "Arial";
      font-size: 0.94rem;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      margin-top: 1.38rem;
      display: flex;
      align-items: center;

      img {
        width: 1.25rem;
        height: 1.25rem;
        margin-right: 0.63rem;
      }

      .blue {
        color: rgb(0, 66, 255);
        font-family: "Arial";
        font-size: 0.94rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        cursor: pointer;
      }

      .arrow {
        width: 0.75rem;
        height: 0.75rem;
        margin-left: 0.73rem;
      }
    }
  }
}

.advantage {
  width: 75rem;
  margin: 0 auto;

  .index-title {
    color: #292b33;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 1.88rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    padding-top: 6.31rem;
  }

  .index-desc {
    display: flex;
    width: 100%;
    height: 1.3rem;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: #474b59;
    text-align: center;
    font-family: "Arial";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3rem;
    margin-top: 1.31rem;
  }

  .card-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 3.13rem;
    flex-wrap: wrap;

    .card {
      width: 23.19rem;
      height: 19.5rem;
      flex-shrink: 0;
      border-radius: 0.38rem;
      background: #f9fcff;
      margin-bottom: 2.75rem;

      .card-icon {
        width: 3.75rem;
        height: 3.75rem;
        margin: 1.88rem auto 1.75rem;
      }

      .card-desc {
        color: rgb(51, 51, 51);
        text-align: center;
        font-family: "PingFang SC";
        font-size: 1.13rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.56rem;
      }

      .card-msg {
        color: rgb(102, 102, 102);
        text-align: center;
        font-family: "PingFang SC";
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.38rem;
        width: 20rem;
        margin: 1.5rem auto 0;
      }
    }
  }
}

.class-show {
  width: 100%;
  height: 69.1rem;
  flex-shrink: 0;
  background: #f9fcff;
  padding-top: 1px;

  .main {
    width: 75rem;
    margin: 0 auto;

    .title {
      color: #333333;
      text-align: center;
      font-family: "PingFang SC";
      font-size: 1.88rem;
      font-style: normal;
      font-weight: 900;
      line-height: 2.63rem;
      margin-top: 4.13rem;
    }

    .desc {
      flex-shrink: 0;
      color: #808080;
      text-align: center;
      font-family: "PingFang SC";
      font-size: 1rem;
      font-style: normal;
      font-weight: 400;
      margin-top: 0.23rem;
      line-height: 1.75rem;
    }

    .tabs {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 2.36rem;

      .tab {
        display: flex;
        width: 9.38rem;
        margin: 0 0.84rem;
        justify-content: center;
        align-items: center;
        border-radius: 2.19rem;
        border: 0.06rem solid #a6a6a6;
        height: 2.38rem;
        flex-shrink: 0;
        color: #666666;
        text-align: center;
        font-family: "PingFang SC";
        cursor: pointer;
      }

      .tab-active {
        border-color: #1c64f7 !important;
        color: #1c64f7 !important;
      }
    }

    .items {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 2.13rem;

      .item {
        background-color: #fff;
        width: 17.81rem;
        margin-bottom: 1.25rem;
        cursor: pointer;
        img {
          width: 17.81rem;
          height: 14.47rem;
        }

        .item-content {
          padding: 1.3rem 0.63rem;
          height: 9.22rem;

          div {
            width: 16.56rem;
            height: 2.34rem;
            line-height: 2.3rem;
            color: #666666;
            font-family: "PingFang SC";
            font-size: 0.88rem;
            font-style: normal;
            font-weight: 400;
            border-bottom: 0.06rem solid #f3f3f3;
          }
        }
      }
    }
  }
}

.server-profect {
  width: 75rem;
  margin: 0 auto;
  height: 34.78rem;
  .profect-title {
    color: #292b33;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 1.88rem;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    padding-top: 6.31rem;
  }

  .profect-desc {
    display: flex;
    width: 100%;
    height: 1.3rem;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: #474b59;
    text-align: center;
    font-family: "Arial";
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3rem;
    margin-top: 1.31rem;
  }

  .profect-list {
    display: flex;
    justify-content: space-between;
    margin-top: 4.73rem;

    .profect {
      width: 18.75rem;
      // padding: 0 3.33rem 0 3.35rem;
      height: 15.19rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 4rem;
        height: 4rem;
        margin: 0 auto;
        display: block;
      }

      .profect-name {
        // width: 11.08rem;
        height: 2.69rem;
        flex-direction: column;
        justify-content: center;
        color: #25272d;
        text-align: center;
        text-shadow: 0 0.19rem 0.38rem #fa3a5c26;
        font-family: "Inter";
        font-size: 1.04rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.56rem;
      }

      .profect-msg {
        width: 12.07rem;
        height: 4.13rem;
        flex-direction: column;
        justify-content: center;
        color: #545252;
        text-align: center;
        text-shadow: 0 0.19rem 0.38rem #fa3a5c26;
        font-family: "Inter";
        font-size: 0.81rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.25rem;
      }

      .profect-btn {
        width: 8.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        justify-content: center;
        align-items: center;
        border-radius: 1.25rem;
        border: 0.13rem solid #2e72f3;
        margin: 0.63rem auto 0;
        color: #2e72f3;
        text-align: center;
        font-family: "Inter";
        cursor: pointer;
      }
    }
  }
}

.news {
  width: 100%;
  background: url("static/index/Background.png") lightgray 0 0 / 100% 102.833%
    no-repeat;
  height: 37.5rem;
  padding-top: 1px;
  // padding:0 1rem;
  padding-left: 1rem;
  overflow: hidden;
  .news-content {
    width: 100rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    .news-msg {
      width: 14.31rem;
      height: 100%;
      flex-shrink: 0;
      .news-title {
        color: #4d4d4d;
        font-family: "Microsoft YaHei";
        font-size: 1.88rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1.5rem;
        margin-top: 8.34rem;
        text-wrap: nowrap;
      }

      .bar {
        width: 2.25rem;
        height: 0.25rem;
        flex-shrink: 0;
        background: #066ee7;
        margin-top: 1.9rem;
      }

      .lot {
        margin-top: 19.11rem;
        display: flex;
        .lot1 {
          width: 2.5rem;
          height: 2.5rem;
          background: url("static/index/Button\ -\ Previous\ slide.png")
            no-repeat;
          background-size: 100%;
          margin-right: 0.75rem;
          cursor: pointer;
          &:hover {
            background: url("static/index/Previous.png");
            background-size: 100%;
          }
          &:focus {
            outline: none;
          }
        }
        .lot2 {
          width: 2.5rem;
          height: 2.5rem;
          background: url("static/index/Button\ -\ Next\ slide.png") no-repeat;
          background-size: 100%;
          cursor: pointer;
          &:hover {
            background: url("static/index/Next\ slide.png");
            background-size: 100%;
          }
          &:focus {
            outline: none;
          }
        }
      }
    }

    .news-list {
      display: flex;
      margin: auto;
      margin-top: 6.38rem;
      width: 100%;
      margin-right: -10px;
      // justify-content: sp;
      & > :nth-child(2n + 1) {
        margin-top: 2.19rem;
      }

      & > :not(:last-child) {
        margin-right: 1.88rem;
      }
      .news-item-blue {
        width: 17.56rem;
        height: 23.13rem;
        background: linear-gradient(180deg, #37cefa 0%, #2e72f3 100%);
        box-shadow: 0 0.19rem 0.62rem 0 rgba(46, 118, 243, 0.5);
        padding: 2.19rem 1.38rem 4.69rem 1.38rem;
        margin-top: 2.19rem;
        box-sizing: border-box;
        .news-date {
          color: rgb(255, 255, 255);
          font-family: "Microsoft YaHei";
          font-size: 0.88rem;
          font-style: normal;
          font-weight: 400;
          line-height: 1.5rem;
        }

        .news-name {
          color: rgb(255, 255, 255);
          font-family: "Microsoft YaHei";
          font-size: 1.13rem;
          font-style: normal;
          font-weight: 400;
          line-height: 1.5rem;
          margin-top: 1.25rem;
        }

        .new-bar {
          width: 1.56rem;
          height: 0.19rem;
          background: #fff;
          margin-top: 1.38rem;
        }

        .new-msg {
          width: 15.76rem;
          height: 6.38rem;
          flex-direction: column;
          justify-content: center;
          color: rgb(255, 255, 255);
          font-family: "Microsoft YaHei";
          font-size: 0.88rem;
          font-style: normal;
          font-weight: 400;
          line-height: 1.5rem;

          margin-top: 1.35rem;
          overflow: hidden;
          // white-space: nowrap;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        .news-btn {
          border-top: 0.06rem solid #fff;
          color: rgb(255, 255, 255);
          font-family: "Microsoft YaHei";
          font-size: 1rem;
          font-style: normal;
          font-weight: 400;
          line-height: 1.88rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 1.25rem;
          margin-top: 1.25rem;
          cursor: pointer;
          img {
            width: 0.41rem;
            height: 0.7rem;
            background: url("static/index/Vector@2x (1).png") 100% no-repeat;
          }
        }
      }
      .news-item-normal {
        width: 17.56rem;
        height: 23.13rem;
        background: #fff;
        box-sizing: border-box;
        padding: 2.19rem 1.38rem 4.69rem 1.38rem;
        &:hover{
        
          background: linear-gradient(180deg, #37cefa 0%, #2e72f3 100%);
       
          .news-date {
            color: rgb(255, 255, 255);
            font-family: "Microsoft YaHei";
            font-size: 0.88rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5rem;
          }
  
          .news-name {
            color: rgb(255, 255, 255);
            font-family: "Microsoft YaHei";
            font-size: 1.13rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5rem;
            margin-top: 1.25rem;
          }
  
          .new-bar {
            width: 1.56rem;
            height: 0.19rem;
            background: #fff;
            margin-top: 1.38rem;
          }
  
          .new-msg {
            width: 15.76rem;
            height: 6.38rem;
            flex-direction: column;
            justify-content: center;
            color: rgb(255, 255, 255);
            font-family: "Microsoft YaHei";
            font-size: 0.88rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5rem;
  
            margin-top: 1.35rem;
            overflow: hidden;
            // white-space: nowrap;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
  
          .news-btn {
            border-top: 0.06rem solid #fff;
            color: rgb(255, 255, 255);
            font-family: "Microsoft YaHei";
            font-size: 1rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.88rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1.25rem;
            margin-top: 1.25rem;
            cursor: pointer;
            img {
              width: 0.41rem;
              height: 0.7rem;
              background: url("static/index/Vector@2x (1).png") 100% no-repeat;
            }
          }
        }
        .news-date {
          color: rgba(51, 51, 51, 1);
          font-family: "Microsoft YaHei";
          font-size: 0.88rem;
          font-style: normal;
          font-weight: 400;
          line-height: 1.5rem;
        }

        .news-name {
          color: rgba(51, 51, 51, 1);
          font-family: "Microsoft YaHei";
          font-size: 1.13rem;
          font-style: normal;
          font-weight: 400;
          line-height: 1.5rem;
          margin-top: 1.25rem;
        }

        .new-bar {
          width: 1.56rem;
          height: 0.19rem;
          background: linear-gradient(270deg, #37cefa 0%, #2e72f3 100%);
          margin-top: 1.38rem;
        }

        .new-msg {
          width: 15.76rem;
          height: 6.38rem;
          flex-direction: column;
          justify-content: center;
          color: #adadad;
          font-family: "Microsoft YaHei";
          font-size: 0.88rem;
          font-style: normal;
          font-weight: 400;
          line-height: 1.5rem;

          margin-top: 1.35rem;
          overflow: hidden;
          // white-space: nowrap;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        .news-btn {
          border-top: 0.06rem solid #f5f5f5;
          color: rgba(51, 51, 51, 1);
          font-family: "Microsoft YaHei";
          font-size: 1rem;
          font-style: normal;
          font-weight: 400;
          line-height: 1.88rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 1.25rem;
          margin-top: 1.25rem;
          cursor: pointer;
          .img {
            width: 0.41rem;
            height: 0.7rem;
            background: url("static/index/Vector.png")  no-repeat;
            background-size: 100%;
          }
        }
      }
     
    }
  }
}
